<!--
 * @Author: ZCL
 * @Date: 2020-05-18 09:03:12
 * @LastEditors: ZCL
 * @LastEditTime: 2020-05-18 09:06:05
-->
<template>
  <!-- 我的资产 -->
  <div class="myAsset">

    <!-- 部门资产 选部门 start -->
    <div v-if="$type === $const.COMMON_TYPES.DEPARTMENT">
      <van-cell title="部门名称:"
        is-link
        :value="department_name"
        @click="openDepartment"
      />
      <van-action-sheet
        v-model="show"
        :actions="departmentList"
        cancel-text="取消"
        @cancel="onCancel"
        @select="selectDepartment"
      />
    </div>
    <!-- 部门资产 选部门 end -->

    <!-- 资产 start -->
    <div class="pt-10 mb-10">
      <van-grid
        clickable
        :column-num="2"
        direction="horizontal"
        icon-size="26px"
        v-if="$type === $const.COMMON_TYPES.MY"
      >
        <van-grid-item
          v-for="item in gridMy"
          :key="item.text"
          :icon="item.icon"
          :text="item.text"
          :to="item.to"
        />
      </van-grid>

      <!-- 部门资产 [显示] start -->
      <van-grid
        clickable
        :column-num="2"
        direction="horizontal"
        icon-size="26px"
        v-if="$type === $const.COMMON_TYPES.DEPARTMENT"
      >
        <!-- <van-grid-item
          v-for="item in gridDepartment"
          :key="item.text"
          :icon="item.icon"
          :text="item.text"
          :to="item.to"
        /> -->
        <van-grid-item :icon="require('@/assets/icon/c.png')"  text="部门领用资产"
          :to="{
            path: '/my-collecting',
            query: {
              title: '部门领用资产',
              type: COMMON_TYPES.DEPARTMENT,
              dept_id: this.dept_id
            }
          }"
        />
        <van-grid-item :icon="require('@/assets/icon/a.png')" text="部门报失资产"
          :to="{
            path: '/my-lost',
            query: {
              title: '部门报失资产',
              type: COMMON_TYPES.DEPARTMENT,
              dept_id: this.dept_id
            }
          }"
        />
      </van-grid>
      <!-- 部门资产 [显示] end -->

    </div>
    <!-- 资产 end -->

    <!-- 操作记录 组件 -->
    <Record @go-record="handleRecordList" />

  </div>
</template>

<script>
import titleMixins from '@/mixins/title';
import Record from '@/components/Record';
import { COMMON_TYPES, OPERATE_TYPES } from '@/constant';

export default {
  name: 'MyAsset',
  mixins: [titleMixins],
  components: {
    Record
  },
  props: ['$type'],
  data () {
    return {
      OPERATE_TYPES,
      COMMON_TYPES,
      show: false, // 部门上拉框展开
      department_name: '', // 选中部门显示名
      dept_id: '', // 选中部门id
      departmentList: [], // 部门列表
      // 我的
      gridMy: [
        {
          text: '我领用的资产',
          icon: require('@/assets/icon/c.png'),
          to: {
            path: '/my-collecting',
            query: {
              title: '我领用的资产',
              type: COMMON_TYPES.MY
            }
          }
        },
        {
          text: '我报失的资产',
          icon: require('@/assets/icon/a.png'),
          to: {
            path: '/my-lost',
            query: {
              title: '我报失的资产',
              type: COMMON_TYPES.MY
            }
          }
        }
      ],
      // 部门
      gridDepartment: [
        // {
        //   text: '部门领用资产',
        //   icon: require('@/assets/icon/c.png'),
        //   to: {
        //     path: '/my-collecting',
        //     query: {
        //       title: '部门领用资产',
        //       type: COMMON_TYPES.DEPARTMENT
        //     }
        //   }
        // },
        // {
        //   text: '部门报失资产',
        //   icon: require('@/assets/icon/a.png'),
        //   to: {
        //     path: '/my-lost',
        //     query: {
        //       title: '部门报失资产',
        //       type: COMMON_TYPES.DEPARTMENT
        //     }
        //   }
        // }
      ]
    };
  },
  methods: {
    // 操作
    handleRecordList (operate) {
      let query = {
        operate
      };
      // 领用
      if (this.$type === COMMON_TYPES.MY && operate === OPERATE_TYPES.RECEIVE) {
        query.type = COMMON_TYPES.MY;
        query.title = '资产领用记录';
      } else if (this.$type === COMMON_TYPES.DEPARTMENT && operate === OPERATE_TYPES.RECEIVE) {
        query.title = '部门资产领用记录';
        query.type = COMMON_TYPES.DEPARTMENT;
        query.dept_id = this.dept_id;
        // 报修
      } else if (this.$type === COMMON_TYPES.MY && operate === OPERATE_TYPES.REPAIR) {
        query.type = COMMON_TYPES.MY;
        query.title = '资产报修记录';
      } else if (this.$type === COMMON_TYPES.DEPARTMENT && operate === OPERATE_TYPES.REPAIR) {
        query.title = '部门报修领用记录';
        query.type = COMMON_TYPES.DEPARTMENT;
        query.dept_id = this.dept_id;
      // 转移
      } else if (this.$type === COMMON_TYPES.MY && operate === OPERATE_TYPES.TRANSFER) {
        query.type = COMMON_TYPES.MY;
        query.title = '资产转移记录';
      } else if (this.$type === COMMON_TYPES.DEPARTMENT && operate === OPERATE_TYPES.TRANSFER) {
        query.title = '部门转移领用记录';
        query.type = COMMON_TYPES.DEPARTMENT;
        query.dept_id = this.dept_id;
        // 退还
      } else if (this.$type === COMMON_TYPES.MY && operate === OPERATE_TYPES.RETURN) {
        query.type = COMMON_TYPES.MY;
        query.title = '资产退还记录';
      } else if (this.$type === COMMON_TYPES.DEPARTMENT && operate === OPERATE_TYPES.RETURN) {
        query.title = '部门退还领用记录';
        query.type = COMMON_TYPES.DEPARTMENT;
        query.dept_id = this.dept_id;
      }
      this.$router.push({
        name: 'record',
        query
      });
    },
    // 获取部门信息
    handleGetDepartment () {
      this.departmentList = this.$store.getters.departmentList.map(item => ({
        ...item,
        name: item.department_name
      }));
    },
    // 打开选择部门上拉框
    openDepartment () {
      this.show = !this.show;
    },
    // 选择部门
    selectDepartment (item) {
      this.department_name = item.department_name;
      this.dept_id = item.dept_id;
      this.show = false;
    },
    // 部门上拉框取消
    onCancel () {
      this.show = false;
      this.$toast('已取消');
    }
  },
  created () {
    this.department_name = this.$store.getters.departmentList[0].department_name;
    this.dept_id = this.$store.getters.departmentList[0].dept_id;
    this.handleGetDepartment();// 获取部门信息
  }
};
</script>
<style lang="scss" scoped>
.myAsset {
  // 资产
  ::v-deep.van-grid-item__content {
    padding: 30px 20px;
  }
  ::v-deep.van-grid-item__text {
    font-size: 14px;
  }
}
</style>
